<template>
    <!--隐式类型转换-->
    <div class="todo-footer" v-show="total"> 
      <label>
        <!--这里也可用v-model来替代，此时不需要计算属性了-->
       <!-- <input type="checkbox" :checked="isAll" @change="checkAll"/> -->
       <input type="checkbox" v-model="isAll" />
      </label>
      <span>
         <span>已完成{{ doneTotal }}</span> / 全部{{ total }}
      </span>
      <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
    </div>
</template>

<script>
  export default {
    name: 'MyFooter',
    props: ['todos'],
    data(){
      return {
      }
    },
    computed: {
      doneTotal(){
        //老方法
        // let total = 0
        // this.todos.forEach(todo => {
        //   if(todo.done) total += 1
        // });
        // return total

        //ES6中reduce应用
        return this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0)
      },

      total(){
        return this.todos.length
      },

      // isAll(){
      //   return this.doneTotal === this.total && this.total > 0
      // },

      isAll: {
        get(){
          return this.doneTotal === this.total && this.total > 0
        },
        set(value){
          //通知App组件全选or取消全选
          this.$emit('checkAllTodo', value)
        }
      }
    },
    methods:{
      // checkAll(e){
      //   //通知App组件全选or取消全选
      //   this.checkAllTodo(e.target.checked)
      // },
      clearAll(){
        //通知App组件删除所有todos中done值为true的对象
        if(confirm('确认清除所有已完成任务吗？')){
          this.$emit('clearAllDoneTodo')
        }
      }
    }

  }
</script>

<style scoped>
  /*footer*/
  .todo-footer {
    height: 40px;
    line-height: 40px;
    padding-left: 6px;
    margin-top: 5px;
  }

  .todo-footer label {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
  }

  .todo-footer label input {
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
  }

  .todo-footer button {
    float: right;
    margin-top: 5px;
  }
</style>